<template>
	<view>
		<u-grid :border="false" @click="click">
			<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:25+'rpx'}" :name="baseListItem.name" :size="25"
					:color="baseListItem.color"></u-icon>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid>
		<u-toast ref="uToast" />
		<u-divider text="预警名单"></u-divider>
		<view class="first" v-if="flag===0">
			<u-list>
				<u-list-item v-for="(item, index) in firstWarnList" :key="index">
					<u-cell :title="item.name" @click="toDetail" :value="item.status" size="large" label="I级">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view class="second" v-else-if="flag===1">
			<u-list>
				<u-list-item v-for="(item, index) in secondWarnList" :key="index">
					<u-cell :title="item.name" @click="toDetail" :value="item.status" size="large" label="II级">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view class="third" v-else-if="flag===2">
			<u-list>
				<u-list-item v-for="(item, index) in thirdWarnList" :key="index">
					<u-cell :title="item.name" @click="toDetail" :value="item.status" size="large" label="III级">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: 0,
				baseList: [{
						name: 'warning',
						title: '一级预警',
						color: 'red'
					},
					{
						name: 'warning',
						title: '二级预警',
						color: 'orange'
					},
					{
						name: 'warning',
						title: '三级预警',
						color: 'blue'
					},
				],
				firstWarnList: [{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：不安全。心理状况：近1月有自杀倾向'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：不安全。心理状况：近1月有自杀倾向'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：不安全。心理状况：近1月有自杀倾向'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有自杀倾向'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有自杀倾向'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有自杀倾向'
					}
				],
				secondWarnList: [{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有失眠问题'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有失眠问题'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有失眠问题'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1月有失眠问题'
					}
				],
				thirdWarnList: [{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1个月情绪失落'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1个月情绪失落'
					},
					{
						name: 'zbl ',
						class: '计算机技术2班',
						status: ' 目前状态：安全。心理状况：近1个月情绪失落'
					}
				]

			}
		},
		methods: {
			click(name) {
				// console.log(name)
				this.flag = name
				// this.$refs.uToast.success(`点击了第${name}个`)
			},
			toDetail() {
				console.log('111')
				uni.navigateTo({
					url: `/pages/Warn/WarnDetail/WarnDetail`
				})
			}
		}
	}
</script>

<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
